<!-- 设备管理的列表组件 -->
<template>
  <div id="DavicelList">
    <table cellpadding="15" cellspacing="0">
      <tr class="list-nav">
        <td>开始时间</td>
        <td>事件来源</td>
        <td>事件状态</td>
        <td>报警状态</td>
        <td>恢复时间</td>
        <td>设备编号</td>
        <td>设备地址</td>
      </tr>
      <tr v-for="item in dacive.equipmentList">
        <td>{{ item.startTime }}</td>
        <td>{{ item.eventSource }}</td>
        <td>{{ eventStart(item.eventStart) }}</td>
        <td :style="alarmStart(item.alarmStart).sty">
          {{ alarmStart(item.alarmStart).text }}
        </td>
        <td>{{ item.restoreTime }}</td>
        <td>{{ item.equipmentNum }}</td>
        <td>{{ item.equipmentAddress }}</td>
      </tr>
    </table>
  </div>
  <div class="list-statistics">
    <div></div>
    <div>
      <a-pagination
        :total="dacive.equipmentList.length"
        show-total
        show-page-size
        @change="changeList"
        @page-size-change="limitSize"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
// 列表信息
import { useDacive } from "../../store/daciveData";
import { ref } from "vue";
let dacive = useDacive();
// 数据表的分页
interface PagenumberType {
  page: number;
  limit: number;
}
let pagenumber: PagenumberType = {
  page: 1,
  limit: 10,
};
let limitSize = (size: number) => {
  pagenumber.limit = size;
  console.log(pagenumber);
  dacive.pageWhereAction(pagenumber);
};
let changeList = (current: number) => {
  pagenumber.page = current;
  dacive.pageWhereAction(pagenumber);
};
// 判断状态渲染对应值
let eventStart = (value: number) => {
  return value == 1 ? "未处理" : "已处理";
};
// 警报状态
let alarmStart = (value: number) => {
  return value == 1
    ? { text: "报警中", sty: { color: "red" } }
    : { text: "已恢复", sty: { color: "green" } };
};
</script>

<style scoped>
#DavicelList {
  border: 1px solid rgba(233, 233, 233, 1);
  padding: 5px;
}

#DavicelList table {
  width: 100%;
  /* border: 1px solid red; */
}
#DavicelList table tr {
  border-bottom: 1px solid rgba(233, 233, 233, 1);
  color: black;
}
#DavicelList table tr td {
  border-bottom: 1px solid rgba(233, 233, 233, 1);
}
.list-statistics {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-left: 10px;
}
</style>
